<template>
  <div class="home">
    <el-button @click="$router.push('/about')" type="success" plain>新建收货地址</el-button>
    你已经创建了1个地址 
    <div class="jian">
      <ul v-for="(item,key) in message" :key="key">
        <li>收货人：{{item.name}}<el-button @click="setDefault(index)" class="btnto" type="warning" plain>默认按钮</el-button></li>
        <li>手机：{{item.tel}}</li>
        <li>所在地区：{{item.di}}</li>
        <li>地址：{{item.zhi}}<span class="spdd">
        <el-link @click="$router.push('/about')" :underline="false" type="primary">修改地址</el-link><el-link @click="delobj(key)" :underline="false" type="danger">删除地址</el-link></span></li>
      </ul>
    </div>
  </div>
</template>
<script>
import {mapMutations,mapState} from "vuex"
export default {
  data() {
    return {
    
    };
  },
  computed:{
    ...mapState(['message'])
  },
  mounted() {
    
  },

  methods: {
    ...mapMutations(['delobj','setAddress']),
    setDefault(index){
      //设置为默认地址
      this.setAddress(index)
    }
  },
};
</script>
<style lang="scss" scoped>
.home{
  width: 100%;
  // margin: auto;
  margin-left: 200px;
  margin-top: 50px;
}
.jian{
  width: 700px;
  height: 250px;
  // border:1px solid #ccc;
  margin-top: 15px;
  ul{
    list-style: none;
    border:1px solid #ccc;
    li{
      padding: 15px 20px;
      .spdd{
        float: right;
        padding: 0 10px;
      }
      .el-link{
        padding: 0 5px;
      }
      .btnto{
        margin-left: 20px;
      }
    }
  }
}
</style>